<!DOCTYPE html>
<html>
<head>
<title>Pure CSS3 Secret Book</title>
<style type="text/css">

/**
 * Pure CSS3 Secret Book by Taufik Nurrohman
 * On: 19 December 2011
 * URL: http://hompimpaalaihumgambreng.blogspot.com/
 * Note: These experiments are under the Creative Commons Attribution + God Almighty License.
 * Please do not replace or remove the attribution above if you want to save/modify this project legally.
 */

* {
  margin:0px;
  padding:0px;
}

body {
  background:#EDCD94;
  text-align:center;
}

a {
  color:#666;
  text-decoration:none;
}

a:hover {
  color:#000;
  text-decoration:underline;
}

#wrap-book {
  width:480px;
  height:650px;
  margin:70px auto 70px;
  background:#B40505;
  -webkit-border-radius:10px 5px 10px 10px;
  -moz-border-radius:10px 5px 10px 10px;
  border-radius:10px 5px 10px 10px;
  -webkit-box-shadow:1px 1px 7px #000;
  -moz-box-shadow:1px 1px 7px #000;
  box-shadow:1px 1px 7px #000;
  position:relative;
  overflow:visible !important;
}

#kertas {
  width:465px;
  height:637px;
  position:absolute;
  top:3px;
  right:5px;
  background:#fff;
  -webkit-border-radius:0px 0px 5px 0px;
  -moz-border-radius:0px 0px 5px 0px;
  border-radius:0px 0px 5px 0px;
  -webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.3),1px 1px 0px #fff,1px 1px 2px rgba(0,0,0,0.3),1px 2px 0px #fff,1px 2px 2px rgba(0,0,0,0.3),1px 3px 0px #fff,1px 3px 2px rgba(0,0,0,0.3),1px 4px 0px #fff,1px 4px 2px rgba(0,0,0,0.3),1px 5px 0px #fff,1px 5px 2px rgba(0,0,0,0.7);
  -moz-box-shadow:0px 0px 2px rgba(0,0,0,0.3),1px 1px 0px #fff,1px 1px 2px rgba(0,0,0,0.3),1px 2px 0px #fff,1px 2px 2px rgba(0,0,0,0.3),1px 3px 0px #fff,1px 3px 2px rgba(0,0,0,0.3),1px 4px 0px #fff,1px 4px 2px rgba(0,0,0,0.3),1px 5px 0px #fff,1px 5px 2px rgba(0,0,0,0.7);
  box-shadow:0px 0px 2px rgba(0,0,0,0.3),1px 1px 0px #fff,1px 1px 2px rgba(0,0,0,0.3),1px 2px 0px #fff,1px 2px 2px rgba(0,0,0,0.3),1px 3px 0px #fff,1px 3px 2px rgba(0,0,0,0.3),1px 4px 0px #fff,1px 4px 2px rgba(0,0,0,0.3),1px 5px 0px #fff,1px 5px 2px rgba(0,0,0,0.7);
}

#out-paper {
  width:265px;
  height:437px;
  position:absolute;
  top:15px;
  right:5px;
  background:#fafafa;
  -webkit-box-shadow:1px 1px 3px rgba(0,0,0,0.4);
  -moz-box-shadow:1px 1px 3px rgba(0,0,0,0.4);
  box-shadow:1px 1px 3px rgba(0,0,0,0.4);
  -webkit-transform:rotate(5deg);
  -moz-transform:rotate(5deg);
  -ms-transform:rotate(5deg);
  -o-transform:rotate(5deg);
  transform:rotate(5deg);
}

#book {
  width:440px;
  height:625px;
  padding:10px;
  background:#B40505;
  background:-webkit-linear-gradient(-45deg,#CB0D08,#AD0D05);
  background:-moz-linear-gradient(-45deg,#CB0D08,#AD0D05);
  background:-ms-linear-gradient(-45deg,#CB0D08,#AD0D05);
  background:-o-linear-gradient(-45deg,#CB0D08,#AD0D05);
  background:linear-gradient(-45deg,#CB0D08,#AD0D05);
  -webkit-box-shadow:inset 0px 1px 1px rgba(255,255,255,0.5),inset 0px -1px 4px rgba(0,0,0,0.3),0px 1px 2px rgba(0,0,0,0.7);
  -moz-box-shadow:inset 0px 1px 1px rgba(255,255,255,0.5),inset 0px -1px 4px rgba(0,0,0,0.3),0px 1px 2px rgba(0,0,0,0.7);
  box-shadow:inset 0px 1px 1px rgba(255,255,255,0.5),inset 0px -1px 4px rgba(0,0,0,0.3),0px 1px 2px rgba(0,0,0,0.7);
  position:absolute;
  top:-4px;
  right:5px;
  -webkit-border-radius:4px 5px 5px 5px;
  -moz-border-radius:4px 5px 5px 5px;
  border-radius:4px 5px 5px 5px;
}

#mid-book {
  width:440px;
  height:625px;
  background:#B62011;
  background:-webkit-linear-gradient(-35deg,#CB0D08,#AD0D05);
  background:-moz-linear-gradient(-35deg,#CB0D08,#AD0D05);
  background:-ms-linear-gradient(-35deg,#CB0D08,#AD0D05);
  background:-o-linear-gradient(-35deg,#CB0D08,#AD0D05);
  background:linear-gradient(-35deg,#CB0D08,#AD0D05);
  border:1px dashed rgba(255,255,255,0.4);
  -webkit-box-shadow:inset 0px 0px 2px rgba(255,255,255,0.3),0px 0px 1px rgba(0,0,0,0.4);
  -moz-box-shadow:inset 0px 0px 2px rgba(255,255,255,0.3),0px 0px 1px rgba(0,0,0,0.4);
  box-shadow:inset 0px 0px 2px rgba(255,255,255,0.3),0px 0px 1px rgba(0,0,0,0.4);
}

#grouper {
  width:15px;
  height:645px;
  -webkit-border-radius:10px / 5px;
  -moz-border-radius:10px / 5px;
  border-radius:10px / 5px;
  position:absolute;
  top:-4px;
  left:0px;
  background:#B40505;
  background:-webkit-linear-gradient(left,#CB0D08,#AD0D05);
  background:-moz-linear-gradient(left,#CB0D08,#AD0D05);
  background:-ms-linear-gradient(left,#CB0D08,#AD0D05);
  background:-o-linear-gradient(left,#CB0D08,#AD0D05);
  background:linear-gradient(left,#CB0D08,#AD0D05);
  -webkit-box-shadow:inset 0px 0px 1px rgba(225,255,255,0.4);
  -moz-box-shadow:inset 0px 0px 1px rgba(225,255,255,0.4);
  box-shadow:inset 0px 0px 1px rgba(225,255,255,0.4);
}

#title {
  position:absolute;
  top:40px;
  left:60px;
  background:#FAF2B1;
  background:-webkit-linear-gradient(-45deg,#fff 0%,#FAF2B1 50%,#FCF7D1 51%,#FAF2B1 100%);
  background:-moz-linear-gradient(-45deg,#fff 0%,#FAF2B1 50%,#FCF7D1 51%,#FAF2B1 100%);
  background:-ms-linear-gradient(-45deg,#fff 0%,#FAF2B1 50%,#FCF7D1 51%,#FAF2B1 100%);
  background:-o-linear-gradient(-45deg,#fff 0%,#FAF2B1 50%,#FCF7D1 51%,#FAF2B1 100%);
  background:linear-gradient(-45deg,#fff 0%,#FAF2B1 50%,#FCF7D1 51%,#FAF2B1 100%);
  border:3px double #DFC65B;
  width:330px;
  height:auto;
  padding:10px 20px 20px;
  text-align:left;
  position:relative;
  font:italic 12px Cambria,Georgia,Serif;
  color:#666;
  -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  box-shadow:inset 1px 1px 0px #fff,inset -1px -1px 0px #fff,0px 1px 2px rgba(0,0,0,0.4);
  text-shadow:0px -1px 0px rgba(255,255,255,0.7);
}

#title h2 {
  margin:0px 0px 7px;
  padding:0px 0px 7px;
  border-bottom:1px dotted #DFC65B;
  font:italic 22px Cambria,Georgia,Serif;
  color:#7C6C2C;
}

.middot {
  position:absolute;
  width:4px;
  height:4px;
  background:#fff;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  -webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.3);
  -moz-box-shadow:0px 1px 1px rgba(0,0,0,0.3);
  box-shadow:0px 1px 1px rgba(0,0,0,0.3);
}

.s1 {
  top:6px;
  left:5px;
}

.s2 {
  top:6px;
  right:5px;
}

.s3 {
  bottom:6px;
  left:5px;
}

.s4 {
  bottom:6px;
  right:5px;
}

#title-rb {
  position:absolute;
  bottom:0px;
  left:5px;
  width:28px;
  height:99px;
  background:#fff;
  border-left:2px solid #1A860A;
  border-right:2px solid #1A860A;
  background:-webkit-linear-gradient(-30deg,#1A860A 0%,#156A08 100%);
  background:-moz-linear-gradient(-30deg,#1A860A 0%,#156A08 100%);
  background:-ms-linear-gradient(-30deg,#1A860A 0%,#156A08 100%);
  background:-o-linear-gradient(-30deg,#1A860A 0%,#156A08 100%);
  background:linear-gradient(-30deg,#1A860A 0%,#156A08 100%);
  -webkit-box-shadow:inset 1px 0px 0px rgba(255,255,255,0.4),inset -1px 0px 0px rgba(255,255,255,0.4),0px 1px 2px rgba(0,0,0,0.4);
  -moz-box-shadow:inset 1px 0px 0px rgba(255,255,255,0.4),inset -1px 0px 0px rgba(255,255,255,0.4),0px 1px 2px rgba(0,0,0,0.4);
  box-shadow:inset 1px 0px 0px rgba(255,255,255,0.4),inset -1px 0px 0px rgba(255,255,255,0.4),0px 1px 2px rgba(0,0,0,0.4);
  -webkit-border-radius:0px 0px 20px 20px;
  -moz-border-radius:0px 0px 20px 20px;
  border-radius:0px 0px 20px 20px;
}

#title-rb:before,#title-rb:after {
  content:"";
  width:0px;
  height:6px;
  display:block;
  border-width:10px 18px;
  border-style:solid;
  border-color:transparent #1A860A transparent #1A860A;
  position:absolute;
  bottom:100%;
  margin-bottom:-14px;
  left:-4px;
}

#title-rb:after {
  margin-bottom:-22px;
}

#pena {
  width:30px;
  height:540px;
  background:#333;
  background:-webkit-linear-gradient(left,#222,#666,#333,#222,#000,#999,#000);
  background:-moz-linear-gradient(left,#222,#666,#333,#222,#000,#999,#000);
  background:-ms-linear-gradient(left,#222,#666,#333,#222,#000,#999,#000);
  background:-o-linear-gradient(left,#222,#666,#333,#222,#000,#999,#000);
  background:linear-gradient(left,#222,#666,#333,#222,#000,#999,#000);
  position:absolute;
  top:30px;
  right:100px;
  -webkit-border-radius:30px / 10px;
  -moz-border-radius:30px / 10px;
  border-radius:30px / 10px;
  -webkit-box-shadow:-2px 0px 3px #000;
  -moz-box-shadow:-2px 0px 3px #000;
  box-shadow:-2px 0px 3px #000;
  -webkit-transform:rotate(-10deg);
  -moz-transform:rotate(-10deg);
  -ms-transform:rotate(-10deg);
  -o-transform:rotate(-10deg);
  transform:rotate(-10deg);
  -webkit-transition:all 1s linear;
  -moz-transition:all 1s linear;
  -ms-transition:all 1s linear;
  -o-transition:all 1s linear;
  transition:all 1s linear;
}

#pena:before {
  content:"";
  width:30px;
  height:520px;
  position:absolute;
  top:-4px;
  left:0px;
  z-index:-1;
  display:block;
  background:#333;
  background:-webkit-linear-gradient(left,#222,#666,#333,#222,#000,#999,#000);
  background:-moz-linear-gradient(left,#222,#666,#333,#222,#000,#999,#000);
  background:-ms-linear-gradient(left,#222,#666,#333,#222,#000,#999,#000);
  background:-o-linear-gradient(left,#222,#666,#333,#222,#000,#999,#000);
  background:linear-gradient(left,#222,#666,#333,#222,#000,#999,#000);
  -webkit-border-radius:30px / 10px;
  -moz-border-radius:30px / 10px;
  border-radius:30px / 10px;
  -webkit-box-shadow:-4px 2px 10px rgba(0,0,0,0.7);
  -moz-box-shadow:-4px 2px 10px rgba(0,0,0,0.7);
  box-shadow:-4px 2px 10px rgba(0,0,0,0.7);
}

#pena:after {
  content:"";
  width:30px;
  height:10px;
  background:transparent;
  border-top:2px solid #111;
  position:absolute;
  top:170px;
  left:0px;
  -webkit-border-radius:30px / 10px;
  -moz-border-radius:30px / 10px;
  border-radius:30px / 10px;
}

#cantelan {
  width:3px;
  height:174px;
  background:#fff;
  background:-webkit-linear-gradient(10deg,#fff 0%,#ccc 50%,#fff 51%,#ddd 100%);
  background:-moz-linear-gradient(10deg,#fff 0%,#ccc 50%,#fff 51%,#ddd 100%);
  background:-ms-linear-gradient(10deg,#fff 0%,#ccc 50%,#fff 51%,#ddd 100%);
  background:-o-linear-gradient(10deg,#fff 0%,#ccc 50%,#fff 51%,#ddd 100%);
  background:linear-gradient(10deg,#fff 0%,#ccc 50%,#fff 51%,#ddd 100%);
  border-left:2px solid #fff;
  border-bottom:1px solid #666;
  -webkit-box-shadow:0px 0px 2px #000;
  -moz-box-shadow:0px 0px 2px #000;
  box-shadow:0px 0px 2px #000;
  position:absolute;
  top:0px;
  right:-4px;
}

#line {
  position:absolute;
  bottom:70px;
  right:15px;
  width:460px;
  background:#B62011;
  background:-webkit-linear-gradient(-35deg,#CB0D08,#AD0D05);
  background:-moz-linear-gradient(-35deg,#CB0D08,#AD0D05);
  background:-ms-linear-gradient(-35deg,#CB0D08,#AD0D05);
  background:-o-linear-gradient(-35deg,#CB0D08,#AD0D05);
  background:linear-gradient(-35deg,#CB0D08,#AD0D05);
  border-top:1px dashed rgba(255,255,255,0.4);
  -webkit-box-shadow:0px -1px 2px rgba(255,255,255,0.3),0px 0px 1px rgba(0,0,0,0.4);
  -moz-box-shadow:0px -1px 2px rgba(255,255,255,0.3),0px 0px 1px rgba(0,0,0,0.4);
  box-shadow:0px -1px 2px rgba(255,255,255,0.3),0px 0px 1px rgba(0,0,0,0.4);
}

#foto-wrap {
  position:absolute;
  top:170px;
  left:60px;
  z-index:20;
}

#foto {
  width:200px;
  height:220px;
  background:#fff;
  -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.7);
  -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.7);
  box-shadow:0px 1px 3px rgba(0,0,0,0.7);
  -webkit-transform:rotate(10deg);
  -moz-transform:rotate(10deg);
  -ms-transform:rotate(10deg);
  -o-transform:rotate(10deg);
  transform:rotate(10deg);
}

#foto:before {
  content:"";
  width:100%;
  height:100%;
  background:#fff;
  position:absolute;
  top:0px;
  left:0px;
  -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.7);
  -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.7);
  box-shadow:0px 1px 3px rgba(0,0,0,0.7);
  -webkit-transform:rotate(5deg);
  -moz-transform:rotate(5deg);
  -ms-transform:rotate(5deg);
  -o-transform:rotate(5deg);
  transform:rotate(5deg);
}

#abu {
  position:absolute;
  bottom:30px;
  left:12px;
  z-index:1000;
  width:180px;
  height:180px;
  background:#aaa;
  -webkit-box-shadow:inset 0px 0px 100px #666;
  -moz-box-shadow:inset 0px 0px 100px #666;
  box-shadow:inset 0px 0px 100px #666;
  -webkit-transform:rotate(15deg);
  -moz-transform:rotate(15deg);
  -ms-transform:rotate(15deg);
  -o-transform:rotate(15deg);
  transform:rotate(15deg);
  -webkit-transition:all 1s linear;
  -moz-transition:all 1s linear;
  -ms-transition:all 1s linear;
  -o-transition:all 1s linear;
  transition:all 1s linear;
}

#abu:hover {
  -webkit-box-shadow:inset 0px 0px 0px #666;
  -moz-box-shadow:inset 0px 0px 0px #666;
  box-shadow:inset 0px 0px 0px #666;
}

#wrap-book:hover #pena {
  -webkit-transform:rotate(10deg) translate(20px,0px);
  -moz-transform:rotate(10deg) translate(20px,0px);
  -ms-transform:rotate(10deg) translate(20px,0px);
  -o-transform:rotate(10deg) translate(20px,0px);
  transform:rotate(10deg) translate(20px,0px);
}


</style>
</head>
<body>

<div id="wrap-book">
<div id="kertas"></div>
<div id="out-paper"></div>
<div id="book">
<div id="mid-book">

</div>
</div>
<div id="grouper"></div>

<div id="title">
<h2>My Secret Book</h2>
Pure CSS3 Secret Book.<br />
Author: Taufik Nurrohman<br />
Download this project on <a href="http://hompimpaalaihumgambreng.blogspot.com">Hompimpa Alaihum Gambreng</a>

<span class="middot s1"></span>
<span class="middot s2"></span>
<span class="middot s3"></span>
<span class="middot s4"></span>

</div>
<div id="line"></div>
<div id="title-rb"></div>

<div id="foto-wrap">
<div id="foto"></div><div id="abu"></div>
</div>

<div id="pena">
<div id="cantelan"></div>
</div>

</div> <!-- wrap-book -->

</body>
</html>